<template>
	<view class="container">
		<view class="result">查询结果</view>
		<view class="location">
			所在位置：{{address}}
		</view>
		<!-- <view class="product">
			<view class="title">项目信息</view>
			<view class="item">
				<view class="name">前左轮胎更换</view>
				<view class="num">x1</view>
			</view>
			<view class="item">
				<view class="name">前右轮胎更换</view>
				<view class="num">x1</view>
			</view>
			<view class="item">
				<view class="name">更换机油</view>
				<view class="num">x1</view>
			</view>
		</view> -->
		<view class="price_list">
			<view class="title">维修价格（平台报价）</view>
			<view class="section" v-for="item in data">
				<view class="name">{{item.name}}</view>
				<view class="price">¥{{item.price}}元</view>
			</view>
		</view>
		<!-- <view class="total">
			合计：¥222.00元
		</view> -->
		<view class="tip">
			提示：此项目价格仅供参考，请以门店实际收费为准
		</view>
	</view>
</template>

<script>
	import {toLogin} from "@/libs/login.js";
	import {mapGetters} from "vuex";
	import {query_price} from "@/api/platform.js";
	import parser from "@/components/jyf-parser/jyf-parser";
	
	// #ifdef MP
	import authorize from "@/components/Authorize";
	// #endif
	export default {
		components: {
			parser,
			// #ifdef MP
			authorize,
			// #endif
		},
		data() {
			return {
				ids:'',
				address:'',
				lon:0,
				lat:0,
				data:undefined,
			}
		},
		computed: mapGetters(["isLogin"]),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV == true) {
						console.info(111)
						// this.getCouponList();
						// this.getCartCount();
						// this.downloadFilePromotionCode();
					}
				},
				deep: true,
			}
		},
		onLoad(options) {
			this.ids = options.ids;
			this.address = options.address;
			this.lon = options.lon;
			this.lat = options.lat;
			this.getData();
		},
		methods: {
			getData(){
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				query_price({address:this.address,ids:this.ids,lat:this.lat,lon:this.lon}).then((res) => {
					let data = res.data;
					that.data= data;
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style lang="scss" scope>
	.container {
		background-color: #F5F5F5;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}
	
	.result{
		font-size: 60rpx;
		font-weight: bold;
		color: red;
		text-align: center;
		background-color: white;
		padding: 30rpx;
	}
	.location{
		font-size: 30rpx;
		color: black;
		padding: 30rpx 30rpx;
		background-color: white;
	}
	.product{
		display: flex;
		flex-direction: column;
		padding: 0rpx 30rpx;
		margin-top: 10rpx;
		background-color: white;
		.title{
			font-size: 30rpx;
			font-weight: bold;
			height: 80rpx;
			line-height: 80rpx;
			color: black;
		}
		.item{
			height: 70rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.name{
				font-size: 28rpx;
				color: black;
			}
			.num{
				font-size: 26rpx;
				color: red;
			}
		}
	}
	
	.price_list{
		background-color: white;
		display: flex;
		flex-direction: column;
		padding: 0rpx 30rpx;
		margin-top: 10rpx;
		background-color: white;
		.title{
			font-size: 30rpx;
			font-weight: bold;
			height: 80rpx;
			line-height: 80rpx;
			color: black;
		}
		.section{
			height: 70rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.name{
				font-size: 28rpx;
				color: black;
			}
			.price{
				font-size: 26rpx;
				color: red;
			}
		}
	}
	.total{
		background-color: white;
		padding: 30rpx;
		text-align: right;
		color: red;
		font-weight: bold;
		font-size: 32rpx;
	}
	.tip{
		font-size: 28rpx;
		color: darkgray;
		padding: 30rpx;
	}
</style>